<script setup lang="ts">
import { useReachBottom, useRouter } from "@tarojs/taro";

import Page from "@/components/common/Page.vue";
import ByAvatar from "@/components/ui/ByAvatar.vue";
import ViewList from "@/components/common/ViewList.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useList from "@/hooks/useList";
import ApiMerchant from "@/api/merchant";


const { params } = useRouter<{
  // 商户活动id
  id: `${number}`;
  date: `${string}`;
}>();

const { loading, list, nextPage } = useList<{
  coupon_name: string;
  id: number;
  staff_avatar: string;
  staff_id: number;
  staff_name: string;
  user_avatar: string;
  user_id: number;
  user_name: string;
  verify_time: string;
}>(
  ApiMerchant.getMerchantActivityVerifyList,
  { search: { activity_apply_id: parseInt(params.id), verify_date: params.date } }
);

useReachBottom(nextPage);
</script>

<template>
  <Page hiddenHeaderBg>
    <template #header>
      <view class="flex pb-2 px-6 bg-[#fff8ef]">
        <text class="w-5/12">核销时间</text>
        <text class="w-4/12 text-center">票券名称</text>
        <text class="w-3/12 text-right">核销人</text>
      </view>
    </template>

    <ViewList :loading="loading" :isEmpty="list.length === 0">
      <ContentBox hideBgImg class="mt-4" bgColor="bg-[#BB8554]/20" v-for="item in list" :key="item.id">
        <view class="flex flex-column justify-between align-center p-4 text-sm">
          <view class="w-5/12">{{ params.date }} {{ item.verify_time }}</view>

          <view class="w-4/12 text-center">{{ item.coupon_name }}</view>

          <view class="flex item-center justify-end w-3/12">
            <text class="pr-1">{{ item.staff_name }}</text>
            <ByAvatar v-if="item.staff_avatar" :src="item.staff_avatar" :size="40" />
          </view>
        </view>
      </ContentBox>
    </ViewList>

    <view class="safe-footer" />
  </Page>
</template>
